
import * as echarts from 'echarts'
export const getOption = (data) => {
    const barWidth = 20;
    const circleHeight = 6;
    // const xData = datas.map(data => {
    //     return data.name;
    // });
    // const yData = datas.map(data => {
    //     return data.value;
    // });
    const xData = data.map(data => {
        return data?.cztxl;
    });
    const yData = data.map(data => {
        return data?.count;
    });

    

    const color1 = ['#5BFCF4', '#1e76e1']
    const color2 = ['#5BFCF4', '#1cc8f6']

    return {
        grid: {
            top: 30,
            left: -10,
            bottom: 0,
            right: 0,
            containLabel: true,
        },
        animation: false,
        xAxis: [
            {
                type: 'category',
                data: xData,
                axisTick: {
                    show: false
                },
                nameTextStyle: {
                    color: '#82b0ec',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#82b0ec',
                    },
                },
                axisLabel: {
                    textStyle: {
                        fontFamily: "Microsoft YaHei",
                        color: "#fff", // x轴颜色
                        fontWeight: "normal",
                        fontSize: "12",
                        lineHeight: 18,
                    },
                    margin: 18,
                    interval: 0, //标签设置为全部显示
                    rotate: 60,
                    formatter: (value) => {
                        let v = '';
                        value.split('').forEach((str, i) => {
                            v = v + str
                            if (i === 9) {
                                v = v + '\n'
                            }
                        })
                        return v
                    }
                },
            },
        ],
        yAxis: [
            {
                show: false,
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: '#0c2c5a',
                    },
                },
                axisLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [barWidth, circleHeight],
                symbolOffset: [0, -3], // 上部椭圆
                symbolPosition: 'end',
                z: 12,
                // "barWidth": "0",
                label: {
                    show: true,
                    position: 'top',
                    // "formatter": "{c}%"
                    fontSize: 13,
                    fontWeight: 'bold',
                    // formatter:(args)=>{
                    //     console.log(args)
                    //     return args.value.toString().split('').join('\n')
                    // }
                    // color: '#34DCFF',
                },
                itemStyle: {
                    normal: {
                        color: (params) => {
                            return color2[params.dataIndex % 2]
                        }
                    },
                },
                data: yData,
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [barWidth, circleHeight],
                symbolOffset: [0, 3], // 下部椭圆
                // "barWidth": "20",
                z: 12,
                itemStyle: {
                    normal: {
                        color: (params) => {
                            return color1[params.dataIndex % 2]
                        }
                    },
                },
                data: yData,
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: function (d) {
                    return d > 0 ? [barWidth + 8, (barWidth + circleHeight) / (barWidth / circleHeight)] : [0, 0]
                },
                symbolOffset: [0, 6], // 下部内环
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#2EA9E5',
                        borderType: 'solid',
                        borderWidth: 1,
                    },
                },
                data: yData,
            },
            {
                name: '',
                type: 'pictorialBar',
                symbolSize: [barWidth + 20, (barWidth + 20) / (barWidth / circleHeight)],
                symbolOffset: [0, 9], // 下部外环
                z: 10,
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderColor: '#19465D',
                        borderType: 'solid',
                        borderWidth: 2,
                    },
                },
                data: yData,
            },
            {
                z: 11,
                name: '公共服务设施数量',
                type: 'bar',
                //silent: true,
                barWidth: barWidth,
                barGap: '10%', // Make series be overlap
                barCateGoryGap: '10%',
                itemStyle: {
                    normal: {
                        opacity: 1,
                        color: (params) => {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                                offset: 0,
                                color: '#0B3147' // color1[params.dataIndex % 2],
                            },
                            {
                                offset: 1,
                                color: color2[params.dataIndex % 2],
                            },
                            ])
                        },
                        barBorderRadius: 0,
                    },
                },
                data: yData,
            },
        ],
    };
}
